<template>
    <el-dialog :show-close="false" :visible.sync="visible" top="calc(4rem + 4px)" width="100%">
        <div class="main" id="main">
            <el-row>
                <el-col :span="is_full ? 24 : 18">
                    <div @click="share_visible = false" class="video-window">
                        <div @click.stop="close" class="video-window-close pd-8 color-fff cursor-pointer">
                            <i class="el-icon el-icon-close weight-bold" style="color:#606060;font-size:2vw"></i>
                        </div>
                        <div class="height-100b position-relative">
                            <div @click="share_visible = false" id="player"></div>
                            <div :style="videoBg" @click="share_visible = false"
                                class="video-window-player height-93b bg-eee" id="video-window-player"></div>
                            <!-- 左下角视频简介部分 -->
                            <div class="author-info">
                                <div @click="toPath('/user-homepage?user_id=' + creation.author.id)"
                                    class="color-eee font-18 cursor-pointer">@{{ creation.author.name }}</div>
                                <div class="color-fff mt-8 font-16 text-line3">
                                    <span class="color-eee">{{ creation.creation_name }}</span>
                                    <span :key="index" class="color-yellow-light cursor-pointer"
                                        v-for="(item, index) in creation.labels">#{{ item }}</span>
                                </div>
                                <div class="position-absolute color-fff need-pay marginTop5 hand" v-if="creation.ad_info">
                                    <span>广告</span>
                                    <span @click.stop="openAd(creation.ad_info.url)" class="pl-5 color-yellow-light">
                                        跳转详情
                                        <i class="el-icon-arrow-right"></i>
                                    </span>
                                </div>
                            </div>
                            <div class="need-recharge" style="z-index: 100000;" v-show="need_recharge">
                                <div class="need-recharge-close">
                                    <i @click="need_recharge = false"
                                        class="el-icon el-icon-close color-fff cursor-pointer font-12"></i>
                                </div>
                                <el-image :src="require('@/assets/icon/live/coin.png')" fit="cover"
                                    style="width: 65px;height: 65px;margin-top: 23px;"></el-image>
                                <div class="mt-15 font-18 color-fff">{{ $store.state.config.coin_name }}不足</div>
                                <div class="mt-5 color-fff font-13">{{ $store.state.config.coin_name }}余额不足 请先充值</div>
                                <div @click="toRecharge" class="need-recharge-recharge cursor-pointer">立即充值</div>
                            </div>
                            <!-- 视频右边是作者信息 -->
                            <div class="more-info flex flex-dre-column">
                                <div @click="toPath('/user-homepage?user_id=' + creation.author.id)"
                                    class="position-relative cursor-pointer">
                                    <el-avatar :size="45" :src="creation.author.avatar"></el-avatar>
                                    <div @click.stop="attentionFun(creation.author.id, creation)"
                                        class="position-absolute more-info-attention cursor-pointer"
                                        v-if="!creation.attention">+</div>
                                </div>
                                <div class="mt-20 color-fff font-15 text-center flex flex-dre-column align-center">
                                    <div v-show="!like_loading">
                                        <el-image :src="require('@/assets/icon/video/like.png')"
                                            @click.stop="likeAction(1); share_visible = false" class="cursor-pointer"
                                            fit="fill" style="width: 32px;height:32px;"
                                            v-show="!creation.liked_count"></el-image>
                                        <el-image :src="require('@/assets/icon/video/liked.png')"
                                            @click.stop="likeAction(0); share_visible = false" class="cursor-pointer"
                                            fit="fill" style="width: 32px;height:32px;"
                                            v-show="creation.liked_count"></el-image>
                                    </div>
                                    <el-image :src="require('@/assets/gif/liking.gif')" class="cursor-pointer" fit="fill"
                                        style="width: 32px;height:32px;" v-show="like_loading"></el-image>
                                    <span>{{ creation.like_count | formatNumber }}</span>
                                </div>
                                <div @click.stop="is_full = !is_full; share_visible = false"
                                    class="mt-13 color-fff font-15 text-center flex flex-dre-column align-center">
                                    <el-image :src="require('@/assets/icon/video/comment.png')" class="cursor-pointer"
                                        fit="fill" style="width: 32px;height:32px;"></el-image>
                                    <span>{{ creation.comment_count | formatNumber }}</span>
                                </div>
                                <div @click.stop="share_visible = !share_visible"
                                    class="mt-13 color-fff font-15 text-center flex flex-dre-column align-center position-relative">
                                    <el-image :src="require('@/assets/icon/video/share.png')" class="cursor-pointer"
                                        fit="fill" style="width: 32px;height:32px;"></el-image>
                                    <!-- <span>{{ creation.forwards | formatNumber }}</span> -->
                                </div>
                                <div @click.stop="reportFun"
                                    class="mt-13 color-fff font-13 text-center flex flex-dre-column align-center">
                                    <el-image :src="require('@/assets/icon/video/complaint.png')" class="cursor-pointer"
                                        fit="fill" style="width: 32px;height:32px;"></el-image>
                                    <span>举报</span>
                                </div>

                                <div class="mt-30 more-info-next-prev color-fff font-28">
                                    <div :style="index == 0 ? 'pointer-events: none;color:#999' : ''" @click.stop="prev">
                                        <i class="el-icon el-icon-arrow-up cursor-pointer"></i>
                                    </div>
                                    <div @click.stop="next" class="mt-40">
                                        <i class="el-icon el-icon-arrow-down cursor-pointer"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 视频底部进度条控制部分 -->
                        <div class="video-window-process height-7b bg-white"></div>
                    </div>
                </el-col>
                <el-col :span="is_full ? 0 : 6">
                    <!-- 评论区 -->
                    <div @click="share_visible = false" class="comment-window bg-sidebar" style="padding-top:1vh">
                        <el-tabs v-model="active">
                            <el-tab-pane :label="'留言 ' + creation.comment_count" name="comment">
                                <div class="pd-30 pt-20 pb-0" style="height:calc(100vh - (145px + 1vh))">
                                    <comment :creation="creation" ref="comment"></comment>
                                </div>
                            </el-tab-pane>
                            <el-tab-pane :label="'作品 ' + total" name="creation">
                                <div class="pd-30 pt-20 pb-0" style="height:calc(100vh - (145px + 1vh))">
                                    <creation :creation="creation" @creationTotal="creationTotal" @sideVideo="sideVideo"
                                        ref="creation"></creation>
                                </div>
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="position-absolute share-card" v-if="share_visible">
            <div class="color-fff">分享视频</div>
            <div class="font-18 color-fff flex align-center mt-10 share-box">
                <div @click.stop="changeFriendIndex('decrement')" class="width-8b text-center">
                    <i class="el-icon-arrow-left cursor-pointer"></i>
                </div>
                <div class="flex align-center width-84b scroll-friend" ref="friend" style="scroll-behavior: smooth;"
                    v-if="contacters.length > 0">
                    <div :class="{ 'ml-4': index > 0 }" :key="index" v-for="(item, index) in contacters">
                        <div @click.stop="shareToFriend(item.userProfile.userID)"
                            class="width-60 text-center cursor-pointer">
                            <div class="flex jus-center">
                                <el-avatar :size="45" :src="item.userProfile.avatar"></el-avatar>
                            </div>
                            <div :title="item.userProfile.nick" class="font-13 text-line1">{{ item.userProfile.nick }}</div>
                        </div>
                    </div>
                </div>
                <div class="text-center flex-1 color-999" v-else>暂无好友，去找别人聊聊吧~</div>
                <div @click.stop="changeFriendIndex('increment')" class="width-8b text-center">
                    <i class="el-icon-arrow-right cursor-pointer"></i>
                </div>
            </div>
            <div @click.stop="copyLink"
                class="mt-20 text-center pt-8 pb-8 color-fff width-90b cursor-pointer flex align-center jus-center"
                style="margin-left:5%;border:1px solid #353047;">
                <i class="el-icon-paperclip font-14"></i>
                <span>复制链接</span>
            </div>
        </div>
        <need-pay :creation="creation" @donePay="donePay" @needRecharge="need_recharge = true" ref="fee"></need-pay>
        <complaint :creation="creation" ref="complaint"></complaint>
    </el-dialog>
</template>

<script>
import Player from 'xgplayer'
// import volume from 'xgplayer/dist/controls/volume';
// import playbackRate from 'xgplayer/dist/controls/playbackRate';
// import HlsJsPlayer from 'xgplayer-hls.js'
import complaint from './complaint.vue'
import needPay from './need-pay.vue'
import comment from './comment'
import creation from './creation/short.vue'
import { Events } from 'xgplayer'
import HlsPlayer from 'xgplayer-hls'
import 'xgplayer/dist/index.min.css'
import sortPlugin from './player-plugin/sort'
import fullIcon from '@/assets/icon/video/full.png'
import mutedIcon from '@/assets/icon/video/muted_empty.png'
import mutedInvalidIcon from '@/assets/icon/video/muted_invalid_empty.png'
export default {
    components: {
        comment,
        creation,
        needPay,
        complaint,
    },
    data() {
        return {
            visible: false,
            player: null,
            is_full: false,
            active: 'comment',
            total: 0,
            like_loading: false,
            share_visible: false,
            need_recharge: false,
            current_friend_index: 0,
            submitComplete: false
        }
    },
    props: {
        creation: {
            type: Object,
            default() {
                return {}
            },
        },
        index: {
            type: Number,
            default: 0,
        },
    },

    computed: {
        videoBg() {
            return "background:url('" + this.creation.first_frame + "') no-repeat center center;background-size:cover;overflow: hidden;filter: blur(30px);"
        },
        playerStyle() {
            return ''
        },
        contacters() {
            return this.$store.state.system.contacters
        },

    },
    watch: {
        visible(value) {
            this.is_full = false
            // !value && this.player.destroy()
            if (!value && this.player) {
                this.player.destroy()
                this.player = null
            }
            this.share_visible = false
            console.log(this.$refs.fee.visible, 12121212)
            this.$refs.fee.visible = false
            this.$refs.fee.step = 1
            this.$refs.fee.msg = ''
            this.$refs.fee.msgLength = 0
            this.$refs.complaint.visible = false

        },
    },
    methods: {
        close() {
            this.visible = false
        },
        next() {
            this.$refs.fee.visible = false; 
            this.$refs.fee.step = 1; 
            this.$refs.fee.msg = '';
             this.$refs.fee.msgLength = 0
            console.log('next')
            this.$emit('next'); 
            this.player.currentTime = 0; 
            this.share_visible = false; 
            
        },
        prev(){
            this.$refs.fee.visible = false; 
            this.$refs.fee.step = 1; 
            this.$refs.fee.msg = ''; 
            this.$refs.fee.msgLength = 0
            console.log('prev')
            this.$emit('prev'); 
            this.player.currentTime = 0; 
            this.share_visible = false;
            
        },
        reportFun() {
            if (Object.keys(this.$store.state.user.user).length) {
                this.$refs.complaint.visible = true;
            } else {
                this.$store.dispatch('system/showLogin')
            }
        },
        attentionFun(id, creation) {
            if (this.submitComplete) return
            this.submitComplete = true
            let that = this
            console.log(id, creation)
            this.$request
                .post('/user-attention/create/' + id)
                .then((res) => {
                    this.submitComplete = false
                    creation.attention = 1
                    this.$message({
                        message: '关注成功',
                        type: 'success',
                        customClass: "messageClass"
                    })
                })
                .catch((error) => {
                    this.submitComplete = false
                })
        },
        toPath(url) {
            window.open(url, '_blank') //不需要登录
            //需要登录
            // if (Object.keys(this.$store.state.user.user).length) {
            //     window.open(url, '_blank')
            // } else {
            //     this.$store.dispatch('system/showLogin')
            // }
        },
        switch() {
            this.init()
            if (this.creation.need_pay) {
                this.player.destroy(false)
                this.player = null

                this.$refs.fee.visible = true
                return true
            }
            if (this.creation.ad_info) {
                // this.player.destroy(false)
                // this.player = null
                // this.visible = false
                // return true
            }
            this.$refs.comment.data = []
            this.$refs.comment.inited = false
            this.$refs.comment.beforeInit()

            this.$refs.fee.visible = false
            this.$refs.fee.step = 1
            this.$refs.fee.msg = ''
            this.$refs.fee.msgLength = 0

            // this.$refs.creation.data = []
            // this.$refs.creation.inited = false
            // this.$refs.creation.beforeInit()
            // this.player.destroy() // 销毁播放器
            this.player.src = this.creation.m3u8_media
            this.$refs.complaint.visible = false;

            this.$nextTick(() => {
                this.player.play()
            })
        },
        creationTotal(value) {
            this.total = value
        },
        likeAction(type) {
            let param = {
                creation_id: this.creation.creation_id,
                type: type,
            }
            this.like_loading = true
            this.$request
                .post('/creation/like/create', param)
                .then((res) => {
                    this.$emit('setLike', { type: type, index: this.index })

                    if (type) {
                        this.creation.liked_count = 1
                        this.creation.like_count++
                    } else {
                        this.creation.liked_count = 0
                        this.creation.like_count--
                    }
                })
                .catch((err) => {
                    this.$message.error(err.message)
                })
                .finally(() => {
                    this.$nextTick(() => {
                        this.like_loading = false
                    })
                })
        },
        init() {
            if (this.player) {
                this.player.destroy()
                this.player = null
            }
            if (this.creation.need_pay) {
                this.$refs.comment.data = []
                this.$refs.comment.inited = false
                this.$refs.comment.beforeInit()
                this.$refs.fee.visible = true

                this.$refs.creation.data = []
                this.$refs.creation.inited = false
                this.$refs.creation.beforeInit()
                return false
            }
            if (this.creation.m3u8_media != '') {
                this.player = new Player({
                    id: 'player',
                    url: this.creation.m3u8_media,
                    autoplay: true,
                    fluid: true,
                    plugins: [HlsPlayer, sortPlugin],
                    ignores: ['replay'],
                    cssFullscreen: false,
                    playbackRate: [0.5, 1, 1.5, 2],
                    controls: true,
                    marginControls: true,
                    commonStyle: {
                        playedColor: '#ffffff',
                        cachedColor: 'transparent',
                        sliderBtnStyle: {
                            background: '#fff',
                        },
                    },
                    icons: {
                        fullscreen: fullIcon,
                        volumeMuted: mutedIcon,
                        volumeLarge: mutedInvalidIcon,
                        volumeSmall: mutedInvalidIcon,
                    },
                })
            } else {
                this.player = new Player({
                    id: 'player',
                    // el:document.querySelector('#dplayer-pop'),
                    url: this.creation.media_urls[0],
                    autoplay: true,
                    fluid: true,
                    plugins: [sortPlugin],
                    ignores: ['replay'],
                    cssFullscreen: false,
                    playbackRate: [0.5, 1, 1.5, 2],
                    controls: true,
                    marginControls: true,
                    commonStyle: {
                        playedColor: '#ffffff',
                        cachedColor: 'transparent',
                        sliderBtnStyle: {
                            background: '#fff',
                        },
                    },
                    icons: {
                        fullscreen: fullIcon,
                        volumeMuted: mutedIcon,
                        volumeLarge: mutedInvalidIcon,
                        volumeSmall: mutedInvalidIcon,
                    },
                })
            }
            this.player.play()
            let that = this
            this.$refs.comment.data = []
            this.$refs.comment.inited = false
            this.$refs.comment.beforeInit()

            this.$refs.creation.data = []
            this.$refs.creation.inited = false
            this.$refs.creation.beforeInit()
            this.player.on(Events.ENDED, () => {
                if (window.is_loop === false || window.is_loop == undefined) {
                    this.player.currentTime = 0
                    that.$emit('next')
                } else {
                    that.player.replay()
                }
            })
        },
        shareToFriend(user_id) {
            this.$store.state.system.message = {
                to: user_id,
                payload: {
                    data: JSON.stringify({
                        longItem: {},
                        postItem: {},
                        shortItem: {
                            creation_id: this.creation.creation_id,
                            first_frame: this.creation.first_frame,
                        },
                        type: 'short',
                    }),
                    description: '',
                    extension: '',
                },
            }
            this.share_visible = false
            this.$message({
                message: '已分享',
                type: 'success',
                customClass: 'super-message',
            })
        },
        share() {
            //显示数据
        },
        toRecharge() {
            this.$router.push({ path: '/wallet/recharge' })
        },
        openAd(url) {
            window.open(url)
        },
        copyLink() {
            let text = 'http://ground.miazh.com/#/pages/short/short?id=' + this.creation.creation_id
            const inputElement = document.createElement('input')
            inputElement.value = text
            document.body.appendChild(inputElement)
            inputElement.select()
            document.execCommand('copy')
            document.body.removeChild(inputElement)
            this.$message({
                message: '复制成功',
                type: 'success',
                customClass: 'super-message',
            })
        },
        donePay(value) {
            let param = {
                value: value,
                index: this.index,
            }
            this.$emit('setMedia', param)
        },
        sideVideo(value) {
            console.log('暂停')
            this.player.pause()
            // this.creation = value
            // this.$refs.comment.data = []
            // this.$refs.comment.inited = false
            // this.$refs.comment.beforeInit()
            // this.player.src = value.m3u8_media

            // this.$nextTick(() => {
            //     this.player.play()
            // })
        },
        changeFriendIndex(type) {
            let width = document.getElementsByClassName('share-box')[0].offsetWidth * 0.84
            let placeholer_num = Math.round(width / 62)
            let end_index = this.contacters.length - placeholer_num
            if (type == 'increment') {
                if (this.current_friend_index < end_index) {
                    this.current_friend_index++
                    document.getElementsByClassName('scroll-friend')[0].scrollLeft = this.current_friend_index * 62
                }
            } else {
                if (this.current_friend_index > 0) {
                    this.current_friend_index--
                    document.getElementsByClassName('scroll-friend')[0].scrollLeft = this.current_friend_index * 62
                }
            }
        },
    },
}
</script>

<style lang="scss" scoped>
/deep/.el-dialog__header {
    padding: 0;
}

/deep/.el-dialog__body {
    padding: 0;
}

/deep/.el-dialog {
    margin: 0;
}

/deep/.el-progress-bar__outer {
    height: 2px !important;
    background: #999 !important;

    border-radius: 0px !important;
}

/deep/.el-avatar--circle {
    border: 1px solid #ff1c6d;
    border-radius: 100%;
}

.main {
    z-index: 10000;
    background: #151225;
    height: calc(100vh - 4rem - 4px);
    overflow-y: hidden;
}

.video-window {
    position: relative;

    &-close {
        position: absolute;
        border-radius: 100%;
        background: #060316;
        top: 30px;
        left: 40px;
        z-index: 10001;
    }

    &-close:hover {
        background: rgba(255, 255, 255, 0.6);
    }

    &-player {
        background-size: 100% 100% !important;
        position: absolute;
        top: 0;
        width: 100%;
    }

    &-process {
        background: #060316;
        position: relative;
        z-index: 1000;

        &-bar {
            top: -2px;
        }
    }
}

.comment-window {
    position: relative;
    z-index: 1000;
    height: 100%;
}

.author-info {
    position: absolute;
    bottom: 10%;
    left: 40px;
    z-index: 1000;
}

.more-info {
    position: absolute;
    right: 40px;
    top: 20%;
    z-index: 1000;

    &-attention {
        top: -2px;
        right: -5px;
        background: #ff1c6d;
        padding: 4px;
        border-radius: 100%;
        color: #fff;
        width: 10px;
        height: 10px;
        line-height: 7px;
        text-align: center;
    }

    &-next-prev {
        padding: 7px 0px;
        background: rgba(0, 0, 0, 0.2);
        text-align: center;
        border-radius: 23px;
        transform: scale(0.8);
    }
}

#player {
    z-index: 100;
    background: transparent;
    padding-top: 59.25% !important;
}

// /deep/.xgplayer video {
//     z-index: 10000;
// }
.el-row,
.el-col,
.video-window {
    height: 100%;
}

.voice-process {
    position: absolute;
    top: 11px;
    z-index: 1000;
    right: -68px;
    padding: 10px;
    border-radius: 4px;
    background: #24203c;
    transform: rotate3d(1, 1, 1, 1);
    transform-origin: top left;
    transform: rotate(-90deg);
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    align-items: center;
    text-align: center;

    &-limit {
        transform: rotate(90deg);
        padding-bottom: 10px;
    }
}

.choose-speed {
    top: -164px;
    position: absolute;
    border-radius: 10px;
    left: -40px;
    background: #24203c;
}

.el-col-6,
.el-col-18,
.el-col-24,
.el-col-0 {
    transition: 0.2s all;
}

/deep/.xg-get-fullscreen,
/deep/.xg-volume,
/deep/.xg-volume-small,
/deep/.xg-volume-mute {
    width: 24px !important;
}

/deep/.el-tabs__item {
    color: #8b8b8b;
    font-size: calc(0.89286vw + 1.14286px);
}

/deep/.el-tabs__item.is-active {
    color: #ffffff;
}

/deep/.el-tabs__active-bar {
    background: #fff;
    width: 30px !important;
    margin-left: 11px !important;
    height: 1px;
}

/deep/.el-tabs__nav-wrap::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: #8b8b8b;
    z-index: 1;
}

/deep/.el-tabs__nav {
    margin-left: 30px;
}

/deep/.xgplayer {
    position: static;
}

/deep/.xg-video-container {
    z-index: 100;
}

/deep/.xgplayer-controls {
    z-index: 101;
}

.el-tabs--top,
.el-tabs__content,
.tab-comment {
    height: 100%;
}

// /deep/.xgplayer video {
//     height: calc(100% - 50px) !important;
// }
.share-card {
    left: 73%;
    top: calc((100vh - 4rem - 4px) * 0.2 + 201px);
    z-index: 10000;
    padding: 20px;
    background: #272337;
    border-radius: 10px;
    border: 1px solid #353047;
    width: 20%;
}

.scroll-friend {
    overflow-x: scroll;
}

.scroll-friend::-webkit-scrollbar {
    display: none;
    /*隐藏滚动条*/
}

.need-recharge {
    position: absolute;
    transition: 0.2s all;
    background: linear-gradient(to bottom, #ff5994, #ff1c6d);
    width: 200px;
    height: 210px;
    left: calc(50% - 100px);
    top: calc(50% - 105px);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;

    &-close {
        position: absolute;
        right: 10px;
        top: 10px;
    }

    &-recharge {
        position: absolute;
        bottom: 15px;
        color: #ff1c6d;
        background: #fff;
        width: 80%;
        text-align: center;
        padding: 5px 0px;
        border-radius: 4px;
    }
}</style>